<!-- 多行公式 -->
<template>
	<div ref="formula" class="formula" :style="{
		display: display,
		transform: 'scale(' + scale + ')',
		color: color,
		fontSize: fontSize,
		fontWeight: fontWeight,
		letterSpacing: letterSpacing
	}">
		<div class="formula-content">
			<template v-for="(item, index) in option" :key="index">
				<FormulaRows 
					v-if="item.rows && item.rows.length" 
					:rows="item.rows" 
					:class="{ 'radical-sign': item.radical }" 
					:style="item.style"
					:tagOffset="tagOffset"
					:key="'rows' + index">
				</FormulaRows>
				<Word v-else :rowItem="item" :tagOffset="tagOffset"></Word>
			</template>
		</div>
	</div>
</template>

<script setup>
// 每个字符
import Word from './word.vue';
// 引入多行
import FormulaRows from './formulaRows.vue';

const props = defineProps({
	// 显示方式, 行内\块级
	display: {
		type: String,
		default: () => 'inline'
	},
	// 文字间距
	letterSpacing: {
		type: String,
		default: () => '1.5px'
	},
	// 颜色
	color: {
		type: String,
		default: () => 'inherit'
	},
	// 字号
	fontSize: {
		type: String,
		default: () => 'inherit'
	},
	// 字重
	fontWeight: {
		type: String,
		default: () => 'initial'
	},
	// 角标偏移值
	tagOffset: {
		type: String,
		default: () => '3px'
	},
	// 整体缩放
	scale: {
		type: Number,
		default: () => 1
	},
	// 显示方式, 行内\块级
	option: {
		type: Object,
		default: () => []
		// 结构
		// [
		// 	{
		// 		content: 's',
		// 		// 位置, 可选值: normal(正常),bottom(左下),top(右上)
		// 		position: 'normal',
		// 		// 缩放倍数, Number: 1(不缩放),0.5(缩小一半),2(放大2倍)
		// 		scale: 1,
		// 		// 倾斜角度, 默认值：0deg（不倾斜）,单位deg
		// 		skew: '-10deg',
		// 		// 间距
		// 		margin: 'auto',
		// 		padding: 'auto',
		// 		// 颜色, 默认:inherit(继承),initial(初始), ...
		// 		color: 'inherit',
		// 		// 字号, 默认:inherit(继承), 单位:px
		// 		fontSize: 'inherit',
		// 		// 字重, 默认:inherit(继承)
		// 		fontWeight: 'inherit',
		// 		// 顶部内容
		// 		topContent: '',
		// 		// 底部内容
		// 		bottomContent: '',
		// 		// 右上角内容
		// 		super: '',
		// 		// 左下角内容
		// 		sub: '',
		// 	},
		// 	{
		// 		rows: [
		// 			// 第一行
		// 			[
		// 				{
		// 					content: 's',
		// 					// 位置, 可选值: normal(正常),bottom(左下),top(右上)
		// 					position: 'normal',
		// 					// 缩放倍数, Number: 1(不缩放),0.5(缩小一半),2(放大2倍)
		// 					scale: 1,
		// 					// 颜色, 默认:inherit(继承),initial(初始), ...
		// 					color: 'inherit',
		// 					// 字号, 默认:inherit(继承), 单位:px
		// 					fontSize: 'inherit',
		// 				}
		// 			],
		// 			// 第二行
		// 			[
		// 				{
		// 					content: 's',
		// 					// 位置, 可选值: normal(正常),bottom(左下),top(右上)
		// 					position: 'normal',
		// 					// 缩放倍数, Number: 1(不缩放),0.5(缩小一半),2(放大2倍)
		// 					scale: 1,
		// 					// 颜色, 默认:inherit(继承),initial(初始), ...
		// 					color: 'inherit',
		// 					// 字号, 默认:inherit(继承), 单位:px
		// 					fontSize: 'inherit',
		// 					// 渲染头部内容
		// 					topContent: 'n',
		// 					// 渲染底部内容
		// 					bottomContent: 'i=s',
		// 					// 头部、底部内容行高，默认：1
		// 					tagLineHeight: '1',
		// 				}
		// 			],
		// 		]
		// 	}
		// ]
	}
});

// 公式对象
const formula = ref({});
defineExpose({
	formula
});
</script>

<style scoped lang="scss">
.formula {
	position: relative;
	font-family: fangsong;

	.formula-content {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
